<template>
  <div class='aa-pop'>
    <div class='aa-popBox' style='display:block;'>
      <div class='aa-popTitle'>
        <div class="swiper-tab">
          <div class="swiper-tab-item" :class="shopDetail_initMode =='partItemInfo'?'swiperActive':''" @click="clickTab(0)">商品信息
            <span class="tab-line"></span>
          </div>
          <div v-if="!isCommonParts" class="swiper-tab-item" :class="shopDetail_initMode =='partItemFitAuto'?'swiperActive':''" @click="clickTab(1)">适配车型 <span class="tab-line"></span></div>
        </div>
        <img @click.stop="on_partItemInfoDialog_close" class="closeImg" src="../assets/images/button_close.png" alt="">
      </div>
      <div class='aa-popCenter'>
        <partItemInfoView v-if="shopDetail_initMode =='partItemInfo'" :partItemInfoDialog_input="partItemInfoDialog_input"></partItemInfoView>
        <partItemFitAutoView v-if="shopDetail_initMode =='partItemFitAuto'" :partItemFitAutoDialog_input="partItemInfoDialog_input"></partItemFitAutoView>
      </div>
    </div>
  </div>
</template>

<script>
import partItemInfoView from '../components/partItemInfoView';
import partItemFitAutoView from '../components/partItemFitAutoView';
export default {
  name: "",
  props: ["shopDetail_mode", "shopDetail_input"],
  data() {
    return {
      partItemInfoDialog_launched: false, //超级目录产品适配车型弹层组件 是否已启动
      partItemFitAutoDialog_launched: false, //超级目录产品适配车型弹层组件 是否已启动
      shopDetail_initMode: "", // 启动商品详情弹层的模式 partItemInfo：商品详情 partItemFitAuto：车型适配
      partItemInfoDialog_input: {}, //超级目录产品适配车型弹层组件 入参
      isCommonParts: false, // 是否为通用件
    };
  },
  components: {
    partItemInfoView,
    partItemFitAutoView,
  },
  created() {
    this.shopDetail_initMode = this.shopDetail_mode;
    this.partItemInfoDialog_input = this.shopDetail_input;
    this.GetPartItemDetail();
  },
  methods: {
    async GetPartItemDetail() {
      const res = await this.$appServive({
        url: "/Misc/GetPartItemDetail_V2",
        data: {
          shopId: this.partItemInfoDialog_input.shopId,
          partItemId: this.partItemInfoDialog_input.partItemId,
        },
      });
      this.isCommonParts = res.isCommonParts;
    },
    clickTab(e) {
      if (e == "0") {
        this.shopDetail_initMode = "partItemInfo";
      } else {
        this.shopDetail_initMode = "partItemFitAuto";
      }
    },
    // 关闭弹层
    on_partItemInfoDialog_close() {
      this.$emit("close", '');
    },
  },
};
</script>

<style scoped>
/* 弹层通用样式 */
.aa-pop {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.68);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
}

.aa-popBox {
  width: 84%;
  height: 68%;
  background: #fff;
  border-radius: 0.21rem;
  padding-top: 1.28rem;
  overflow: hidden;
  float: left;
  clear: none;
}
.aa-popTitle {
  width: 100%;
  padding: 0.24rem 0.4rem;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  box-sizing: border-box;
  margin-top: -1.28rem;
  position: relative;
  z-index: 3;
  float: left;
  clear: left;
}

.aa-popTitle > span {
  width: auto;
  height: 0.8rem;
  font-size: 0.4rem;
  line-height: 0.8rem;
  text-align: left;
  color: #282828;
  display: block;
  float: left;
  clear: none;
}
.aa-popTitle > .closeImg {
  height: 0.36rem;
  width: 0.36rem;
  margin-right: -0.08rem;
  text-align: center;
  display: block;
  float: right;
  position: absolute;
  right: 0.27rem;
  top: 50%;
  transform: translateY(-50%);

  /* position: absolute;
  right: .24rem;
  top: 50%;
  transform: translateY(-50%);
  width: .36rem;
  height: .36rem; */
}
.aa-popCenter {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  float: left;
  clear: left;
}
.swiper-tab {
  display: flex;
  width: 100%;
  margin-top: 0.27rem;
  justify-content: center;
}
.swiper-tab-item {
  margin-left: 0.4rem;
  font-size: 0.36rem;
  padding-bottom: 0.2rem;
  color: #999;
}
.swiperActive {
  color: #e74c3c;
  position: relative;
  font-weight: bold;
}
.swiperActive span {
  position: absolute;
  display: block;
  width: 0.67rem;
  height: 0.08rem;
  background: #e74c3c;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -0.27rem;
}
</style>
